<template>
  <view class="container">
    <view @click="goLogin" v-if="unLogin" class="user-box flex" style="align-items: center">
      <view class="avatar">
        <image src="/static/my/user-default.png" mode=""></image>
      </view>
      <view v-if="true" class="info">
        <view class="name flex" style="margin-bottom: 0">
          <text>请登录</text>
          <view class="arrow"></view>
        </view>
      </view>
    </view>
    <view v-else class="user-box flex">
      <view class="avatar">
        <image v-if="userInfo.headUrl" :src="userInfo.headUrl" mode=""></image>
        <image v-else src="/static/my/user-default.png" mode=""></image>
      </view>

      <view class="info">
        <view class="name flex">
          <text>{{ userInfo.nickName }}</text>
          <view class="flex">
            <image @click="goMsg" :class="{ 'has-msg': unreadCount }" src="/static/my/msg-icon.png" mode=""></image>
            <image @click="goSetting" src="/static/my/setting-icon.png" mode=""></image>
          </view>
        </view>
        <image v-if="userInfo.levelPic" class="vip" :src="userInfo.levelPic" mode=""></image>
        <view class="code-box flex">
          <view class="code flex">
            邀请口令：{{ userInfo.invitationCode }}
            <image @click="copy(userInfo.invitationCode)" src="/static/common/copy-icon.png" mode=""></image>
          </view>
          <view v-if="userInfo.inviteFlag == 0" @click="bindCode" class="bind-code">绑定邀请口令</view>
        </view>
      </view>
    </view>
    <view class="vip-box flex">
      <image src="/static/my/vip-icon.png" mode=""></image>
      <text>升级会员享更多权益</text>
      <view @click="goVip" class="btn">前往升级</view>
    </view>
    <view class="content">
      <view @click="goIncome" class="money-box">
        <view class="flex btn-box">
          <view class="money">
            <view class="t">可提现金额（元）</view>
            <view class="num">
              <text>¥</text>
              <text>{{ userInfo?.realBalance ?? 0 }}</text>
            </view>
          </view>
          <view @click.stop="goWithdrawList" class="btn">立即提现</view>
        </view>
        <view class="flex" style="justify-content: space-between">
          <view class="money">
            <view class="t">今日预估收益</view>
            <view class="num">
              <text>¥</text>
              <text>{{ userInfo?.dayEstCommission ?? 0 }}</text>
            </view>
          </view>
          <view class="money">
            <view class="t">本月预估收益</view>
            <view class="num">
              <text>¥</text>
              <text>{{ userInfo?.monthEstCommission ?? 0 }}</text>
            </view>
          </view>
          <view class="money">
            <view class="t">上月预估收益</view>
            <view class="num">
              <text>¥</text>
              <text>{{ userInfo?.lastMonthEstCommission ?? 0 }}</text>
            </view>
          </view>
        </view>
        <view class="tips">*每月25日可提现上月确认收货的订单收入</view>
      </view>
      <view class="order-box">
        <view class="top flex">
          我的订单
          <text @click="goOrder(0)" class="flex">全部订单</text>
        </view>
        <view class="flex order-item">
          <view @click="goOrder(1)" class="item flex">
            <image src="/static/my/order-icon1.png" mode=""></image>
            <text>已付款</text>
          </view>
          <view @click="goOrder(2)" class="item flex">
            <image src="/static/my/order-icon2.png" mode=""></image>
            <text>已收货</text>
          </view>
          <view @click="goOrder(3)" class="item flex">
            <image src="/static/my/order-icon3.png" mode=""></image>
            <text>已结算</text>
          </view>
          <view @click="goOrder(4)" class="item flex">
            <image src="/static/my/order-icon4.png" mode=""></image>
            <text>已失效</text>
          </view>
        </view>
      </view>
      <view class="ad-box flex">
        <image @click="goInvite" src="/static/my/invite.png" mode="widthFix"></image>
        <image @click="goSchool" src="/static/my/school.png" mode="widthFix"></image>
      </view>
      <view class="menu-box">
        <view class="t">我的功能</view>
        <view class="menu-item flex">
          <view @click="goMenuPath('fans')" class="item flex">
            <image src="/static/my/menu-icon1.png" mode=""></image>
            <text>粉丝</text>
          </view>
          <view @click="goMenuPath('collect')" class="item flex">
            <image src="/static/my/menu-icon2.png" mode=""></image>
            <text>我的收藏</text>
          </view>
          <view @click="goMenuPath('footprint')" class="item flex">
            <image src="/static/my/menu-icon3.png" mode=""></image>
            <text>我的足迹</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getUser, getUnreadCount } from '@/api/my.js';

const userInfo = ref({});
const unLogin = ref(true);
const unreadCount = ref(0);
onLoad(async () => {
  getUnreadCount().then((res) => {
    unreadCount.value = res.data;
  });
  const { code, data } = await getUser();
  if (code == 0) {
    unLogin.value = false;
  }
  userInfo.value = data;
});
const goMsg = () => {
  uni.navigateTo({
    url: '/subPages/message/message',
  });
};
const goSetting = () => {
  uni.navigateTo({
    url: '/subPages/setting/setting',
  });
};
const copy = (data) => {
  uni.setClipboardData({
    data: data,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      });
    },
  });
};
const bindCode = () => {
  uni.navigateTo({
    url: '/subPages/bindingInviteCode/index?hideTips=true',
  });
};
const goVip = () => {
  uni.navigateTo({
    url: '/subPages/subWebView/index?url=https://h5t.leshua.top/jush_h5/#/pageTwo/vipCentre/vipCentreV0',
  });
};
const goIncome = () => {
  uni.navigateTo({
    url: '/subPages/income/income',
  });
};
const goWithdrawList = () => {
  uni.navigateTo({
    url: '/subPages/withdrawList/withdrawList',
  });
};
const goInvite = () => {
  uni.navigateTo({
    url: '/subPages/invite/invite',
  });
};
const goSchool = () => {
  uni.navigateTo({
    url: '/subPages/subWebView/index?url=https://h5t.leshua.top/jush_h5/#/pageTwo/newUser/commercialCollege',
  });
};
const goOrder = (index) => {
  uni.navigateTo({
    url: `/subPages/order/order?tabIndex=${index}`,
  });
};
const goLogin = () => {
  uni.navigateTo({
    url: '/subPages/login/index',
  });
};
const goMenuPath = (type) => {
  let url;
  switch (type) {
    case 'collect':
      url = '/subPages/collect/collect';
      break;
    case 'footprint':
      url = '/subPages/footprint/footprint';
      break;
    case 'fans':
      url = '/subPages/subWebView/index?url=https://h5t.leshua.top/jush_h5/#/pageTwo/fans/fans';
      break;
  }
  uni.navigateTo({
    url: url,
  });
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;

  .user-box {
    padding: 12px 12px 0;
    align-items: flex-start;

    .avatar {
      width: 62px;
      height: 62px;
      overflow: hidden;
      border-radius: 50%;
      margin-right: 12px;
      border: 2px solid #fff;
      box-shadow: 0px 2px 6px 0px #0000000f;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      flex: 1;

      .name {
        justify-content: space-between;
        margin-bottom: 10px;
        .arrow {
          width: 6px;
          height: 6px;
          border-top: 1px solid #333;
          border-right: 1px solid #333;
          transform: rotate(45deg);
          margin-right: 8px;
        }
        text {
          display: block;
          width: 190px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333;
          font-weight: 600;
          font-size: 18px;
        }

        image {
          width: 20px;
          height: 20px;
          margin-left: 12px;
          overflow: visible;
          &.has-msg {
            position: relative;
            &::after {
              content: '·';
              color: #ff0309;
              font-size: 22px;
              font-weight: bolder;
              position: absolute;
              top: -14px;
              right: -2px;
            }
          }
        }
      }

      .vip {
        width: 44px;
        height: 20px;
        margin-bottom: 6px;
      }

      .code-box {
        justify-content: space-between;

        .code {
          color: #999;
          font-weight: 400;
          font-size: 12px;

          image {
            width: 12px;
            height: 12px;
            margin-left: 3px;
          }
        }

        .bind-code {
          box-shadow: 1px 1px 2px 0px #ffffff4d;
          background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
          width: 96px;
          height: 34px;
          border-radius: 34px;
          justify-content: center;
          color: #fff;
          font-weight: 500;
          font-size: 12px;
          line-height: 34px;
          text-align: center;
        }
      }
    }
  }

  .vip-box {
    margin: 20px auto 6px;
    background-image: url('~@/static/my/vip-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 62px;
    width: calc(100% - 24px);
    padding: 0 12px 8px;

    image {
      width: 24px;
      height: 24px;
      margin-right: 16px;
    }

    text {
      flex: 1;
      font-weight: 500;
      font-size: 14px;
      color: #f3ded3;
    }

    .btn {
      width: 68px;
      height: 24px;
      border-radius: 20px;
      background: linear-gradient(180deg, #ffe9dc 0%, #fdc9ab 100%);
      color: #595d6a;
      font-weight: 500;
      font-size: 12px;
      line-height: 24px;
      text-align: center;
    }
  }

  .content {
    box-shadow: 0px -10px 12px 0px #0000000f;
    background: linear-gradient(to bottom, #f9f9f9, #f8f8f8);
    border-radius: 20px 20px 0 0;
    margin-top: -8px;
    width: 100%;
    padding: 20px 12px 15px;

    .money-box {
      padding: 12px;
      background-image: url('~@/static/my/money-bg.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 100%;
      border-radius: 12px;

      .btn-box {
        margin-bottom: 20px;
        justify-content: space-between;

        .btn {
          background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
          box-shadow: -1px -1px 2px 0px #c9030080 inset;
          width: 72px;
          height: 34px;
          border-radius: 34px;
          text-align: center;
          line-height: 34px;
          color: #fff;
          font-weight: 500;
          font-size: 12px;
        }
      }

      .money {
        width: 33%;

        .t {
          color: #666;
          font-weight: 400;
          font-size: 12px;
          margin-bottom: 10px;
        }

        .num {
          font-weight: 600;
          text {
            font-size: 12px;
            &:last-child {
              font-size: 18px;
            }
          }
        }
      }

      .tips {
        margin-top: 12px;
        color: #999;
        font-weight: 400;
        font-size: 10px;
      }
    }

    .order-box {
      padding: 16px 12px 12px;
      background: #ffffff;
      border-radius: 12px;
      margin-top: 12px;

      .top {
        justify-content: space-between;
        color: #333;
        font-weight: 500;
        font-size: 14px;

        text {
          color: #666;
          font-weight: 400;
          font-size: 12px;

          &::after {
            content: '';
            display: inline-block;
            width: 5px;
            height: 5px;
            border-top: 1px solid #666;
            border-right: 1px solid #666;
            transform: rotate(45deg);
            margin-left: 4px;
          }
        }
      }

      .order-item {
        margin-top: 12px;
        justify-content: space-between;

        .item {
          flex-direction: column;
          justify-content: center;
          width: 64px;

          image {
            width: 24px;
            height: 24px;
            margin-bottom: 8px;
          }

          text {
            color: #666;
            font-weight: 400;
            font-size: 12px;
          }
        }
      }
    }

    .ad-box {
      justify-content: space-between;

      image {
        margin-top: 12px;
        width: calc(50vw - 17px);
        border-radius: 12px;
      }
    }

    .menu-box {
      margin-top: 12px;
      padding: 16px 12px 12px;
      border-radius: 12px;
      background: #ffffff;

      .t {
        color: #333;
        font-weight: 500;
        font-size: 14px;
      }

      .menu-item {
        flex-wrap: wrap;

        .item {
          width: 25%;
          flex-direction: column;
          padding-bottom: 8px;
          margin-top: 12px;

          image {
            width: 24px;
            height: 24px;
            margin-bottom: 8px;
          }

          text {
            color: #666;
            font-weight: 400;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>